<template>
  <div class="container">
    <swiper class="swiper-container" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular" @change="swiperChange" @animationfinish="animationfinish">
      <div v-for="item in imgUrls" :key="index">
        <swiper-item>
          <image :src="item.img_url" class="slide-image" />
        </swiper-item>
      </div>
    </swiper>
    <img class="userinfo-avatar" v-if="userInfo" :src="userInfo.avatarUrl" background-size="cover" />
    <div class="list-container">
      <div v-if="permission == 1">
      <comment-item v-for="(item,index) in list" :data="item" :key="index"></comment-item>
        <span class="blank-tips" v-if="list.length == 0">暂无数据</span>
      </div>
      <div v-else>
        <span class="blank-tips">待管理员授权后可访问</span>
      </div>
    </div>
    <picker class="weui-btn" mode="multiSelector" @change="MultiPickerChange" :value="indexMulPicker" :range="multiArray">
      <span class="search-btn"></span>
    </picker>
  </div>
</template>

<script>
import commentItem from '@/components/commentItem'
// import * as types from '../../store/mutation-types/userInfo'

export default {
  data () {
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 5000,
      duration: 900,
      circular: true,
      imgUrls: [],
      list: [],
      indexMulPicker: [0, 0, 0],
      classifyList: null,
      page: 0,
      classifyOne: 0,
      classifyTwo: 0,
      classifyThree: 0,
      permission:1,
    }
  },
  computed: {
    userInfo () {
      return this.$store.state.theUserInfo
    },
    multiArray() {
      let arr = [];
      if(this.classifyList) {
        let partOne = ['全部'];
        let partTwo = ['全部'];
        let partThree = ['全部'];
        this.classifyList.part_one_list.map(v => {
          partOne.push(v.name);
        });
        this.classifyList.part_two_list.map(v => {
          partTwo.push(v.name);
        });
        this.classifyList.part_three_list.map(v => {
          partThree.push(v.name);
        });
        arr = [partOne,partTwo,partThree];
      }
      return arr
    }
  },

  components: {
    commentItem
  },

  methods: {
      checkLogin(){
          var userToken=wx.getStorageSync('userToken');
          console.log(userToken);
          var userInfo = this.$store.state.theUserInfo;
          if(!userToken || userToken == '' || !userInfo || userInfo == ""){
              wx.redirectTo({
                  url: '/pages/login/main'
              })
          }
      },

    MultiPickerChange(e) {
      console.log('选中的值为：' + this.multiArray[0][e.mp.detail.value[0]] + '-' + this.multiArray[1][e.mp.detail.value[1]] + '-' + this.multiArray[2][e.mp.detail.value[2]]);
      this.classifyOne = e.mp.detail.value[0] == 0? 0 : this.classifyList.part_one_list[e.mp.detail.value[0]-1].id;
      this.classifyTwo = e.mp.detail.value[1] == 0? 0 : this.classifyList.part_two_list[e.mp.detail.value[1]-1].id;
      this.classifyThree = e.mp.detail.value[2] == 0? 0 : this.classifyList.part_three_list[e.mp.detail.value[2]-1].id;
      this.indexMulPicker = e.mp.detail.value;
      this.getProductList(true);
    },
    initData() {
//        this.checkLogin();
      this.getBannerList();
      this.getClassifyList();
    },
    getBannerList() {
      wx.request({
        url: 'https://wz.zliangchina.com/api/product/banner-list',
        success: (res) =>{
          if(res&&res.data&&res.data.data) {
            this.imgUrls = res.data.data;
          }
        }
      })
    },
    getClassifyList() {
      wx.request({
        url: 'https://wz.zliangchina.com/api/product/get-classify-list',
        success: (res) =>{
          if(res&&res.data&&res.data.data) {
            this.classifyList = res.data.data;
          }
        }
      })
    },
    getProductList(isReload) {
      if(isReload) {
        wx.showLoading();
        this.page = 0;
      }
      let postData = {
        user_token: wx.getStorageSync('userToken'),
        classify_one: this.classifyOne,
        classify_two: this.classifyTwo,
        classify_three: this.classifyThree,
        limit: 3,
        page: this.page
      };

      wx.request({
        url: 'https://wz.zliangchina.com/api/product/get-product-list',
        data: postData,
        success: (res) =>{
          if(res.data.level === 'success') {
            this.permission = 1;
            if(isReload) {
              this.list = res.data.data.product_list;
              wx.hideLoading();
              wx.stopPullDownRefresh();
              wx.showToast({
                title: '加载完成',
                icon:'success',
                duration: 1000
              })
            }else {
              this.list = [...this.list,...res.data.data.product_list];
            }
          }else {
              wx.hideLoading();
              wx.stopPullDownRefresh();
              this.permission = 0;
          }
        }
      })
    }
  },
  mounted() {
    this.getProductList(true);
  },
  created () {
    this.initData();
  },
  async onPullDownRefresh() {
    this.getProductList(true);
  },
  onReachBottom() {
    this.page++;
    this.getProductList();
  },
  onLoad(){
      this.checkLogin()
  }

}

</script>

<style>
.userinfo-avatar {
  position: absolute;
  top: 270rpx;
  right: 20rpx;
  box-shadow: 0 0 20rpx rgba(0,0,0,0.3);
}
.list-container {
  padding-top: 80rpx;

}
.blank-tips {
  color: #aaaaaa;
  display: block;
  width: 100%;
  text-align: center;
  line-height: 180rpx;
}
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.swiper-container {
  height: 360rpx;
}
.slide-image {
  width: 100%;
}
.search-btn {
  position: fixed;
  top: 50%;
  left: 20rpx;
  transform: translateY(-50%);
  display: block;
  width: 100rpx;
  height: 100rpx;
  background: url("../../static/img/icon-sou.png");
  background-size: 100rpx 100rpx;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
}

</style>
